<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本使用</title>
    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <h2 class="page-header">Promise 初体验</h2>
    <button class="btn btn-primary" id="btn">点击抽奖</button>
</div>
<script>
    //生成随机数
    function rand(m,n){
        return Math.ceil(Math.random() * (n-m+1)) + m-1;
    }
    /**
     点击按钮,  1s 后显示是否中奖(30%概率中奖)
     若中奖弹出    恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券
     若未中奖弹出  再接再厉
     */
        //获取元素对象
    const btn = document.querySelector('#btn');
    //绑定单击事件
    btn.addEventListener('click', function(){
        //定时器
        // setTimeout(()=>{
        //     let randnum = rand(1,100)
        //     console.log(randnum)
        //     if(randnum<=30){
        //         alert('恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券')
        //     }else{
        //         alert('再接再厉')
        //     }
        // },1000)

        //Promise 形式实现
        // resolve 解决  函数类型的数据
        // reject  拒绝  函数类型的数据

        let p = new Promise((reslove, reject)=>{
            setTimeout(()=>{
                let randnum = rand(1,100)
                if(randnum<=30){
                    reslove(randnum)
                }else{
                    reject(randnum)
                }
            },1000)
        })

        p.then((value)=>{
            alert('恭喜恭喜, 奖品为 10万 RMB 劳斯莱斯优惠券 '+value)
        },(reason)=>{
            alert('再接再厉 ' + reason)
        })

    });

</script>
</body>

</html>